<template>
  <div>
<!--    返回-->
    <div>
      <el-page-header @back="back" content="活动数据">
      </el-page-header>
    </div>
    <!--数据概览-->
    <div>
      <div>数据概览</div>
      <!--卡片-->
      <div>
        <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple-dark">
          <el-row>今日扫码次数</el-row>
          <el-row>
            <el-col style="size: 50px">{{table.today}}</el-col>
          </el-row>
          <el-row>
            <el-divider></el-divider>
            累计活动扫码次数:{{table.cumulative}}
          </el-row>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-dark">
          <el-row>今日扫码留资人数</el-row>
          <el-row>
            <el-col style="size: 50px">{{table.userDay}}</el-col>
          </el-row>
          <el-row>
            <el-divider></el-divider>
            累计活动扫码留资人数:{{table.userAll}}
          </el-row>
        </div></el-col>
      </el-row>
      </div><br />
      <!--扫码数据概览-->
      <div>
        <el-row>
          <el-col :span="16">扫码数据概览</el-col>
          <el-col :span="8">
              <el-form size="small" :inline="true" :model="queryData" class="user-search">
                  <el-form-item>
                      <el-date-picker
                              v-model="queryData.dateDay"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
                      </el-date-picker>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="chaxun">查询</el-button>
                      <el-button @click="chongzhi">重置</el-button>
                  </el-form-item>
              </el-form>
          </el-col>
        </el-row>
        <!--插入图表-->
        <el-row>
          <el-col :span="24" class="text-c">
            <div class="st-gbox">
              <div class="cavasbox" ref="SUMEchart"></div>
            </div>
          </el-col>
        </el-row>
      </div><br />
      <!--留资数据报表-->
      <div>
        <el-row>留资数据报表</el-row>
        <el-row>
          <!--搜索-->
          <el-col :span="22">
            <el-form size="small" :inline="true" :model="formInline" class="user-search">
              <el-form-item>
                <el-input v-model="formInline.telephone" placeholder="输入手机号"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-select v-model="formInline.empId" placeholder="请选择客服人员">
                      <el-option
                              v-for="item in emp"
                              :key="item.empId"
                              :label="item.empName"
                              :value="item.empId" />
                  </el-select>
              </el-form-item>
              <el-form-item>
                  <el-date-picker
                          v-model="formInline.data"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                  </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="shearch">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="2">
            <el-button size="small" type="primary" @click="down">导出表格</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="dateTime"
              label="扫码时间"
              width="180">
            </el-table-column>
            <el-table-column
              prop="userId"
              label="客户id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="telephone"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="empName"
              label="引流成员">
            </el-table-column>
          </el-table>
            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pagePagination.total">
            </el-pagination>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import * as Chart from 'echarts'
import axios from "axios";
export default {
  name: "activity",
    props: {
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
  data(){
    return{
        formInline: {},
        dateDay: '',
        pagePagination: {
            currentPage: 1,
            pageSizes: [10, 15, 20, 25],
            pageSize: 10,
            total: 0
        },
      //折线图
      //  销售总金额
      SUMoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '扫码数据',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['10-1', '10-2', '10-3', '10-4', '10-5', '10-6', '10-7', '10-8', '10-9', '10-10', '10-11', '10-12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '扫码数据',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [5, 7, 8, 4, 5, 3, 4, 6, 5, 4, 6, 4],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },

      tableData: [],
      emp: [],
        table: {},
        queryData: {}
    }

  },
    mounted() {
        this.queryDataHandle(1,10)
    },
    methods:{
        queryDataHandle(page = 1, row = 10){
            let tracingPoster = {
                pageNum: page,
                pageSize: row,
                tracingPosterId: this.formData.tracingPosterId
            }
            let that = this
            //列表
            that.$request("/api/PosterStatisti/getByTracingPosterId/1_0", tracingPoster, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
            that.$request("/api/PosterStatisti/getByTracingPosterUserId/1_0", tracingPoster, "POST").then((data) => {

                that.table = data.data
                console.log(that.table)
            })
            //员工
            this.$request("/api/emp/getEmpList/1_0", {}, "POST").then((data) => {
                that.emp = data.rows
            })

        },
        shearch() {
            let posterStatisti = {
                tracingPosterId: this.formData.tracingPosterId,
                telephone: this.formInline.telephone,
                empId: this.formInline.empId,
                startTime: this.formInline.data[0],
                endTime: this.formInline.data[1]
            }
            let that = this
            //列表
            that.$request("/api/PosterStatisti/getByTracingPosterId/1_0", posterStatisti, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },
        chaxun() {

        },
    //图表
    getSUM() {
      this.chart = Chart.init(this.$refs.SUMEchart)
      this.chart.setOption(this.SUMoption)
    },
        resetQuery() {
            this.formInline = {}
        },

    //返回按钮
    back() {
      this.$emit("currentHandler","list")
    },
    //导出表格
    down(){
        let posterStatisti = {
            tracingPosterId: this.formData.tracingPosterId,
            telephone: this.formInline.telephone,
            empId: this.formInline.empId,
            // startTime: this.formInline.data[0],
            // endTime: this.formInline.data[1]
        }
        axios.post("/api/PosterStatisti/download/1_0", posterStatisti, {responseType: 'blob'},
            {
                headers: {
                    "content-type": "multipart/from-data",
                }
            }).then((res) => {
            // 创建a标签
            const link = document.createElement('a')
            //设置下载类型
            let blob = new Blob([res.data], {})
            //设置a标签样式
            link.style.display = 'none'
            //设置a标签url
            link.href = URL.createObjectURL(blob)

            //设置下载后文件名
            link.download = "溯源统计.xlsx"
            //页面添加创建的a标签
            document.body.appendChild(link)
            //点击a标签
            link.click()
            //删除a标签
            document.body.removeChild(link)
        }).catch(error => {
            this.$message.error('下载失败');
        })
    },
    shijianchaxun(){
      this.$message({
        message: '查询成功',
        type: 'success'
      })
    },
        chongzhi() {
            this.queryData = {}
        }
  }
}
</script>

<style scoped>
.bg-purple-dark {
  background: #8d8d8d;
}
.grid-content {
  border-radius: 4px;
  min-height: 80px;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
